@import '../../styles/variables.scss';

.home-container {
  display: flex;
  width: 100%;
  height: 100vh;
  overflow: hidden;

  // 左侧边栏
  .sidebar {
    width: 86px;
    background-color: #1890ff;
    color: white;
    display: flex;
    flex-direction: column;
    height: 100%;

    .logo {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 16px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      position: relative;
      
      img {
        width: 40px;
        height: 40px;
      }
      
      span {
        font-size: 16px;
        margin-top: 6px;
        font-weight: 500;
      }
      
      .erp-tag {
        position: absolute;
        bottom: -5px;
        background-color: white;
        color: #1890ff;
        border-radius: 10px;
        padding: 2px 6px;
        font-size: 10px;
        font-weight: bold;
      }
    }
    
    .menu {
      display: flex;
      flex-direction: column;
      flex: 1;
      
      .menu-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 12px 0;
        cursor: pointer;
        position: relative;
        
        &:hover, &.active {
          background-color: rgba(255, 255, 255, 0.1);
        }
        
        &.active::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 3px;
          height: 20px;
          background-color: #fff;
          border-radius: 0 2px 2px 0;
        }
        
        .menu-icon-ant {
          font-size: 20px;
          color: white;
          transition: all 0.3s;
          margin: 0 10px 0 20px;
        }
        
        span {
          font-size: 14px;
          font-weight: 500;
        }
        
        &:hover .menu-icon-ant {
          transform: scale(1.1);
        }

        // 二级菜单样式
        .submenu {
          position: absolute;
          left: 86px;
          top: 0;
          width: 220px;
          background-color: #fff;
          border-radius: 4px;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
          z-index: 1000;
          overflow: hidden;
          animation: fadeIn 0.2s ease-in-out;
          
          // 资料菜单特殊样式
          &.data-submenu {
            width: 440px;

            .submenu-content {
              display: flex;

              .submenu-group {
                width: 220px;
                border-bottom: none;

                &:first-child {
                  border-right: 1px solid #f0f0f0;
                }

                .submenu-title {
                  height: 42px;
                  line-height: 42px;
                  padding: 0 16px;
                  background-color: #f7f7f7;
                  border-bottom: 1px solid #f0f0f0;
                  color: #333;
                  font-size: 14px;
                  font-weight: 500;
                }

                .submenu-items {
                  padding: 4px 0;

                  .submenu-item {
                    height: 36px;
                    line-height: 36px;
                    padding: 0 16px;
                    margin: 0;
                    color: #666;
                    font-size: 14px;
                    display: flex;
                    align-items: center;
                    cursor: pointer;

                    &:hover {
                      background-color: rgba(24, 144, 255, 0.05);
                      color: #1890ff;
                    }
                  }
                }
              }
            }
          }
          
          &::before {
            content: '';
            position: absolute;
            left: -6px;
            top: 20px;
            width: 12px;
            height: 12px;
            background-color: #fff;
            transform: rotate(45deg);
            box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.05);
            z-index: -1;
          }
          
          .submenu-content {
            position: relative;
            z-index: 1;
            background-color: #fff;

            &[data-layout="double-column"] {
              display: flex;
              width: 440px;

              .submenu-group {
                flex: 1;
                border-bottom: none;
                min-width: 220px;
                
                &:first-child {
                  border-right: 1px solid #f0f0f0;
                }

                .submenu-title {
                  font-size: 14px;
                  font-weight: 500;
                  color: #333;
                  background-color: #f7f7f7;
                  padding: 12px 16px;
                  border-bottom: 1px solid #f0f0f0;
                }

                .submenu-items {
                  padding: 8px 0;

                  .submenu-item {
                    padding: 10px 16px;
                    color: #666;
                    font-size: 14px;
                    cursor: pointer;
                    transition: all 0.2s;

                    &:hover {
                      background-color: rgba(24, 144, 255, 0.05);
                      color: #1890ff;
                    }
                  }
                }
              }
            }
          }
          
          .submenu-group {
            padding: 0;
            border-bottom: 1px solid #f0f0f0;
            
            &:last-child {
              border-bottom: none;
            }
            
            .submenu-title {
              font-size: 14px;
              font-weight: 500;
              color: #333;
              background-color: #f7f7f7;
              padding: 8px 16px;
              height: 36px;
              line-height: 36px;
              position: relative;
            }
            
            .submenu-items {
              .submenu-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 8px 16px;
                height: 32px;
                line-height: 32px;
                color: #666;
                font-size: 14px;
                transition: all 0.2s;
                cursor: pointer;
                position: relative;
                
                &:hover {
                  background-color: rgba(24, 144, 255, 0.05);
                  color: #1890ff;
                }
                
                &[data-separator="true"] {
                  border-bottom: 1px solid #f0f0f0;
                  margin-bottom: 1px;
                }
                
                .report-tag {
                  display: inline-block;
                  padding: 1px 6px;
                  font-size: 12px;
                  background-color: #4cd174;
                  color: #fff;
                  border-radius: 2px;
                  margin-left: 8px;
                  line-height: 18px;
                  height: 20px;
                  vertical-align: middle;
                  position: relative;
                  top: -1px;
                }
              }
            }
          }
        }
      }
    }
  }
  
  // 主内容区
  .main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    
    // 顶部导航
    .top-nav {
      background: white;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
      z-index: 10;
      display: flex;
      flex-direction: column;
      
      .nav-header {
        height: 56px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        border-bottom: 1px solid #f0f0f0;
        
        .left-controls {
          display: flex;
          align-items: center;
          
          .company-name {
            font-size: 16px;
            font-weight: 600;
            color: #262626;
            position: relative;
            padding-left: 12px;
            
            &:before {
              content: '';
              position: absolute;
              left: 0;
              top: 50%;
              transform: translateY(-50%);
              width: 3px;
              height: 16px;
              background: linear-gradient(to bottom, #1890ff, #40a9ff);
              border-radius: 2px;
            }
          }
          
          .breadcrumb-divider {
            width: 1px;
            height: 16px;
            background-color: #e8e8e8;
            margin: 0 16px;
          }
          
          .breadcrumb {
            display: flex;
            align-items: center;
            color: #8c8c8c;
            font-size: 14px;
            
            .parent-title {
              color: #8c8c8c;
            }
            
            .separator {
              margin: 0 8px;
              color: #d9d9d9;
            }
            
            .current-title {
              color: #595959;
              font-weight: 500;
            }
          }
        }
        
        .right-controls {
          display: flex;
          align-items: center;
          gap: 8px;
          
          .divider {
            width: 1px;
            height: 16px;
            background-color: #e8e8e8;
            margin: 0 4px;
          }
          
          .ant-btn {
            height: 32px;
            border-radius: 4px;
            font-size: 14px;
            transition: all 0.3s;
            
            &:hover {
              color: #1890ff;
              background-color: rgba(24, 144, 255, 0.05);
            }
            
            .anticon {
              margin-right: 4px;
            }
          }
        }
      }

      .nav-tabs {
        height: 40px;
        display: flex;
        align-items: center;
        padding: 0 12px;
        background: white;
        overflow-x: auto;
        position: relative;
        
        &::-webkit-scrollbar {
          display: none;
        }
        
        &:after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 1px;
          background-color: #f0f0f0;
        }
        
        .nav-tab {
          height: 40px;
          padding: 0 16px;
          display: flex;
          align-items: center;
          font-size: 14px;
          color: #595959;
          position: relative;
          cursor: pointer;
          flex-shrink: 0;
          transition: all 0.3s;
          margin-right: 4px;
          border-radius: 4px 4px 0 0;
          
          .tab-icon {
            font-size: 14px;
            margin-right: 6px;
            color: inherit;
          }
          
          .tab-title {
            white-space: nowrap;
          }
          
          &:hover {
            color: #1890ff;
            background-color: rgba(24, 144, 255, 0.04);
          }
          
          &.active {
            color: #1890ff;
            background-color: rgba(24, 144, 255, 0.08);
            font-weight: 500;
            
            &::after {
              content: '';
              position: absolute;
              bottom: 0;
              left: 0;
              width: 100%;
              height: 2px;
              background: linear-gradient(to right, #1890ff, #40a9ff);
              border-radius: 2px 2px 0 0;
              z-index: 1;
            }
          }
          
          .close-icon {
            margin-left: 8px;
            font-size: 12px;
            opacity: 0.6;
            transition: all 0.3s;
            padding: 4px;
            border-radius: 50%;
            
            &:hover {
              background-color: rgba(0, 0, 0, 0.05);
              color: #ff4d4f;
              opacity: 1;
            }
          }
          
          &:hover .close-icon {
            opacity: 0.8;
          }
        }
      }
    }
    
    // 内容区域
    .content-area {
      flex: 1;
      padding: 16px 20px;
      background-color: #f0f2f5;
      overflow-y: auto;
      
      .content-header {
        display: flex;
        margin-bottom: 16px;
        
        .nav-buttons {
          display: flex;
          align-items: center;
          
          .anticon {
            padding: 8px;
            border-radius: 4px;
            background-color: white;
            color: #666;
            margin-right: 8px;
            font-size: 12px;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
          }
        }
      }
      
      // 功能卡片区域
      .function-cards {
        .function-row, .function-row-bottom {
          display: flex;
          margin-bottom: 20px;
          gap: 20px;
          
          .function-card {
            flex: 1;
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 30px 0;
            cursor: pointer;
            transition: all 0.3s;
            
            &:hover {
              transform: translateY(-3px);
              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
              background-color: rgba(24, 144, 255, 0.02);

              .label {
                color: #1890ff;
              }
            }
            
            .icon-wrapper {
              width: 60px;
              height: 60px;
              border-radius: 50%;
              display: flex;
              justify-content: center;
              align-items: center;
              margin-bottom: 15px;
              position: relative;
              
              .card-icon-ant {
                font-size: 30px;
                color: white;
              }
              
              &::before {
                display: none;
              }
              
              .card-icon {
                display: inline-block;
                width: 24px;
                height: 24px;
                background-color: transparent;
              }
            }
            
            .label {
              font-size: 16px;
              color: #333;
              margin-top: 10px;
              font-weight: 500;
            }
          }
          
          .empty-card {
            flex: 1;
          }
        }
      }
      
      // 常用功能区域
      .common-functions {
        background-color: white;
        border-radius: 8px;
        padding: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        margin-top: 5px;
        
        .section-title {
          font-size: 16px;
          color: #333;
          margin-bottom: 20px;
          font-weight: 500;
        }
        
        .function-items {
          display: flex;
          flex-wrap: wrap;
          gap: 20px;
          
          .common-function-item {
            width: calc(25% - 15px);
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            border: 1px solid #e8e8e8;
            cursor: pointer;
            color: #666;
            font-size: 14px;
            transition: all 0.3s;
            
            .item-icon {
              margin-right: 8px;
              font-size: 16px;
              color: #1890ff;
            }
            
            &:hover {
              border-color: #1890ff;
              color: #1890ff;
              background-color: rgba(24, 144, 255, 0.02);
              transform: translateY(-2px);
              box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);

              .item-icon {
                transform: scale(1.1);
              }
            }
          }
        }
      }
    }
  }
  
  // 右侧边栏
  .right-sidebar {
    width: 300px;
    background-color: #f9fafb;
    border-left: 1px solid #e8e8e8;
    padding: 16px;
    overflow-y: auto;
    
    .side-card {
      background-color: white;
      border-radius: 4px;
      margin-bottom: 16px;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
      overflow: hidden;
      
      .side-card-header {
        padding: 12px 16px;
        font-size: 14px;
        color: #333;
        font-weight: 500;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .icon {
          color: #999;
        }
      }
      
      .side-card-content {
        padding: 16px;
        
        p {
          margin-bottom: 10px;
          color: #666;
          font-size: 13px;
          
          &:last-child {
            margin-bottom: 0;
          }
        }
        
        .guide-content, .multi-device, .print-helper {
          text-align: center;
          
          .guide-button, .download-button {
            margin: 10px 0;
            width: 100%;
          }
        }
        
        .wechat-service {
          margin-top: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #1890ff;
          font-size: 13px;
          
          .wechat-icon {
            display: inline-block;
            width: 18px;
            height: 18px;
            background-image: url('/icons/wechat.png');
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            margin-right: 6px;
          }
        }
      }
    }
  }
} 